<template>
  <div id="app" class="app-container">
    <router-view v-slot="{ Component, route }">
      <transition :name="getTransitionName(route)" mode="out-in" appear>
        <keep-alive :include="cachedViews">
          <component :is="Component" :key="route.fullPath" />
        </keep-alive>
      </transition>
    </router-view>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { useTagsViewStore } from '@/stores/modules/tagsView'
import type { RouteLocationNormalized } from 'vue-router'

// 获取缓存的视图
const tagsViewStore = useTagsViewStore()
const cachedViews = computed(() => tagsViewStore.cachedViews)

/**
 * 获取路由过渡动画名称
 */
const getTransitionName = (route: RouteLocationNormalized): string => {
  // 根据路由层级决定动画效果
  const depth = route.path.split('/').length
  
  if (route.meta?.transition) {
    return route.meta.transition as string
  }
  
  // 默认动画
  if (depth <= 2) {
    return 'fade'
  }
  
  return 'slide-left'
}
</script>

<style lang="scss">
#app {
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

.app-container {
  width: 100%;
  height: 100%;
}

// 路由过渡动画
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.2s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}

.slide-left-enter-active,
.slide-left-leave-active {
  transition: all 0.3s ease;
}

.slide-left-enter-from {
  transform: translateX(20px);
  opacity: 0;
}

.slide-left-leave-to {
  transform: translateX(-20px);
  opacity: 0;
}

.slide-right-enter-active,
.slide-right-leave-active {
  transition: all 0.3s ease;
}

.slide-right-enter-from {
  transform: translateX(-20px);
  opacity: 0;
}

.slide-right-leave-to {
  transform: translateX(20px);
  opacity: 0;
}

// 页面加载动画
.page-loading {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 200px;
  
  .loading-text {
    margin-left: 12px;
    color: var(--el-text-color-secondary);
  }
}

// 滚动条样式
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: var(--el-fill-color-lighter);
  border-radius: 3px;
}

::-webkit-scrollbar-thumb {
  background: var(--el-border-color-darker);
  border-radius: 3px;
  
  &:hover {
    background: var(--el-border-color-dark);
  }
}

// 响应式设计
@media (max-width: 768px) {
  .app-container {
    overflow-x: auto;
  }
}
</style>